<script setup lang="ts">
  import { defineAsyncComponent,reactive,ref,toRefs,onMounted,computed } from 'vue';
  import { toRaw } from "@vue/reactivity";
  import { Key } from '@/stores/auth';
  import { Session } from '@/utils/storage';
  import request from "@/utils/request";
  import {notify,confirm} from '@/utils/element';
  import { isAuth } from '@/utils/utils';
  import {exportExcel} from '@/utils/exportExcel';
  import printJS from 'print-js'

  const AddEdit=defineAsyncComponent(()=>import('@/views/yonghu/add-edit.vue'));
        const state=reactive({
          query:{
                                                                                yonghuzhanghao:'',
                                                                                            yonghuxingbie:'',
                                                    yonghuxingming:'',
                    
    },
    page:{
      current:1,
      size:10,
      total:0
    },
          tableList:[],
    ids:[],
    isdel:true,
      
        })
  const { query,tableList,page,isdel
                          } = {...toRefs(state)};


      


  //进入执行
  getDateList();
  //获取列表
  function getDateList(){
    const params={
      page: state.page.current,
      limit: state.page.size,
                            }


                                                            if (state.query.yonghuzhanghao != '' && state.query.yonghuzhanghao != undefined) {
              params['yonghuzhanghao'] = '%' + state.query.yonghuzhanghao + '%'
            }
                                                                      if (state.query.yonghuxingbie != '' && state.query.yonghuxingbie != undefined) {
              params['yonghuxingbie'] = '%' + state.query.yonghuxingbie + '%'
            }
                                      if (state.query.yonghuxingming != '' && state.query.yonghuxingming != undefined) {
              params['yonghuxingming'] = '%' + state.query.yonghuxingming + '%'
            }
                    request({
      url:'yonghu/page',
      method:'get',
      params
    }).then(({data})=>{

      state.page.total=data.total;
      state.tableList=data.list;
            })
  }
  //查询
  function handleQuery(){
    getDateList();
  }

  function download(file) {
    window.open(`${file}`)
  }

  //删除

  function handleDelete(row:any){

    request({
      url:`yonghu/delete`,
      method:'post',
      data:[row.id]
    }).then(({data})=>{
      notify("删除成功",{type:'success'});
      getDateList();

    })
  }

  const multipleSelection = ref<[]>([]);

  function handleSelectionChange(val:any){
    multipleSelection.value=val;
    const list=toRaw(multipleSelection.value)
    list.forEach((item)=>{
      state.ids.push(item.id);
    })

    if(list.length==0){
      state.ids=[];
      state.isdel=true
    }else{
      state.isdel=false
    }

  }


  function listdel(){
    const ids=toRaw(state.ids)
    request({
      url:`yonghu/delete`,
      method:'post',
      data:ids
    }).then(({data})=>{
      notify("删除成功",{type:'success'});
      getDateList();

    })
  }


  const users=Session.get(Key.userInfoKey);

  const editRef=ref();


      


  function add(){
    editRef.value.open('新增','add');
  }
  function handleEdit(row:any){
    editRef.value.open('修改','up',row);
  }

      

      


      
      

</script>
<template>
    <el-card shadow="never">
        <template #header>
            <div class="card_header">
                <b>列表</b>
            </div>
        </template>
        <div class="layout-padding">
            <el-form inline :model="query" label-suffix=":">

                                                                                                            
                        <el-form-item label="用户账号"  prop="yonghuzhanghao">
                            <el-input v-model="query.yonghuzhanghao" maxlength="100" placeholder="请输入用户账号" clearable style="width: 200px;"/>
                        </el-form-item>
                                                                                                                                
                        <el-form-item label="用户性别"  prop="yonghuxingbie">
                            <el-input v-model="query.yonghuxingbie" maxlength="100" placeholder="请输入用户性别" clearable style="width: 200px;"/>
                        </el-form-item>
                                                        
                        <el-form-item label="用户姓名"  prop="yonghuxingming">
                            <el-input v-model="query.yonghuxingming" maxlength="100" placeholder="请输入用户姓名" clearable style="width: 200px;"/>
                        </el-form-item>
                                                    <el-form-item>
                  <div class="button-container">
                    <el-button icon="ele-Search" @click="handleQuery()" class="button button-7">查询</el-button>
                    <el-button  class="button button-6" v-if="isAuth('yonghu','删除')" icon="ele-Delete" @click="listdel()" :disabled="isdel" type="danger">多选删除</el-button>
                    <el-button class="button button-8" v-if="isAuth('yonghu','新增')" icon="ele-Plus" type="success" @click="add()">新增</el-button>
                                                                                                          </div>

                </el-form-item>
            </el-form>



            <el-table
                ref="tableListRef"
                :data="tableList"
                :header-cell-style="{
            textAlign: 'center',
            height: '60px',
            background: '#1e3a8a',
            color: '#ffffff'
        }"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                stripe
                :row-style="{height:'80px'}"
                border
                highlight-current-row
                class="custom-table"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />



                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="yonghuzhanghao" label="用户账号">

                                    <template #default="{row}">
                                        {{row.yonghuzhanghao}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="mima" label="密码">

                                    <template #default="{row}">
                                        {{row.mima}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="lianxifangshi" label="联系方式">

                                    <template #default="{row}">
                                        {{row.lianxifangshi}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="yonghuxingbie" label="用户性别">

                                    <template #default="{row}">
                                        {{row.yonghuxingbie}}
                                    </template>

                                </el-table-column>

                                                                                                                                                                                                <el-table-column header-align="center"  align="center" prop="yonghuxingming" label="用户姓名">

                                    <template #default="{row}">
                                        {{row.yonghuxingming}}
                                    </template>

                                </el-table-column>

                                                                                                        <el-table-column fixed="right" align="center" label="操作" width="400">
                    <template #default="{row}">
                                                <el-button class="button button-8" v-if="isAuth('yonghu','修改')" icon="ele-Edit" @click.stop="handleEdit(row)" type="warning">修改</el-button>
                        <el-popconfirm  v-if="isAuth('yonghu','删除')"  width="auto" @confirm="handleDelete(row)"  :title="`确定永久删除吗？`">
                            <template #reference>
                                <el-button class="button button-6" icon="ele-Delete" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>





                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <m-page :page="page" @pageChange="getDateList"/>

            <AddEdit ref="editRef" @refresh="getDateList"/>
        </div>
    </el-card>

    

</template>

<style scoped>
  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
  }

  .button {
    padding: 0px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .button:hover {
    transform: scale(1.05);
  }

  /* 不同样式的按钮 */
  .button-6 {
    background: linear-gradient(45deg, #ff9a9e, #fad0c4);
    color: white;
  }

  .button-7 {
    background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
    color: white;
  }

  .button-8 {
    background: linear-gradient(45deg, #84fab0, #8fd3f4);
    color: white;
  }
</style>
